<template>
  <div>
    <el-dialog title="收款管理" v-model="showDialog" :width="dialogWidth" :close-on-click-modal="false">
      <div class="bigTitle">收款信息</div>
      <el-form label-width="120px" class="baseForm">
        <el-form-item label="项目名称" class="item">
          {{ form.projectName }}
        </el-form-item>
        <el-form-item label="客户名称" class="item">
          {{ form.customerName }}
        </el-form-item>
        <el-form-item label="收款方式" class="item">
          {{ form.receiveTypeName }}
        </el-form-item>
        <el-form-item label="收款金额" class="item">{{ form.money }}元</el-form-item>
        <el-form-item label="收款日期" class="item">
          {{ form.receiveDate }}
        </el-form-item>
        <el-form-item label="经手人" class="item">
          {{ form.salerName }}
        </el-form-item>
        <el-form-item label="归属部门" class="item">
          {{ form.orgName }}
        </el-form-item>
        <el-form-item label="备注" class="item">
          {{ form.note }}
        </el-form-item>
      </el-form>
      <div class="bigTitle">合同信息</div>
      <el-table :data="tables" border class="table" ref="multipleTable" header-cell-class-name="table-header">
        <el-table-column prop="contractCode" label="合同编号" width="100"></el-table-column>
        <el-table-column prop="projectName" label="项目名称"></el-table-column>
        <el-table-column prop="leastMoney" label="应收金额" width="100" :formatter="(...arr) => arr[2] + '元'"></el-table-column>
        <el-table-column label="收款金额" width="130" prop="money" :formatter="(...arr) => arr[2] + '元'"></el-table-column>
        <el-table-column label="备注" prop="note"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogWidth: window.innerWidth > 780 ? '1050px' : '100%',
      showDialog: false,
      form: {},
      tables: [],
    }
  },
  methods: {
    show(id) {
      this.$api.receivemoney.find(id).then(({ state, msg }) => {
        if (!state) return this.$message.warning('获取还款信息失败')
        msg.receiveDate = msg.receiveDate.slice(0, 10)
        this.form = msg
        this.tables = msg.contracts
        this.showDialog = true
      })
    },
  },
}
</script>
<style scoped lang="scss">
.baseForm {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.bigTitle {
  font-size: 18px;
  text-indent: 40px;
  padding: 20px 0;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
  margin-bottom: 10px;
  background: #00000005;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
</style>
